<template>
    <SearchForm v-model="formInline" style="margin-bottom: 40px;" />
    <el-scrollbar v-if="list.length" style="height: calc(100% - 98px);">
        <MaterialList :playVisible="playVisible" :progressVisible="progressVisible" :list="list"
            @item-click="onMaterialClick" />
    </el-scrollbar>
    <el-empty v-else description="暂无数据" />
</template>

<script setup>
import SearchForm from './searchForm.vue'
import MaterialList from './materialList.vue'

const props = defineProps({
    playVisible: {
        type: Boolean,
        default: false
    },
    progressVisible: {
        type: Boolean,
        default: false,
    },
    list: {
        type: Array,
        default: () => []
    }
})

const formInline = reactive({
    libTitle: '',
    libType: ''
})


const emit = defineEmits(['change', 'item-click'])
function onMaterialClick(item) {
    emit('item-click', item)
}

watch(formInline, (val) => {
    emit('change', val)
}, {
    deep: true
})

</script>